<template>
	<div>
		 <mealInfoDetail :mealInfo="mealInfos"></mealInfoDetail>
		<el-table :data="mealInfo" height="700" border style="width: 100%;">
			<el-table-column prop="mealname" label="套餐名称" width="150">
			</el-table-column>
			<el-table-column prop="mealtype" label="套餐类型" width="150">
			</el-table-column>
			<el-table-column prop="mealstate" label="套餐状态" width="150">
			</el-table-column>
			<el-table-column prop="mealmoney" label="套餐价格">
			</el-table-column>
			<el-table-column label="操作" width="250" fixed="right">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small" icon="el-icon-document">详情</el-button>
					<!-- <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<mealInfoadd></mealInfoadd>
	</div>
</template>
<script>
	import mealInfoDetail from '@/components/meal_info/Meal_info_detail.vue'
	import mealInfoadd from '@/components/meal_info/Meal_info_add.vue'
	import {
		request
	} from "network/request.js"

	export default {
		components: {
			mealInfoDetail,
			mealInfoadd
			
		},
		data() {
			return {
				mealInfos:'',
				mealInfo: [{
					mealid: '2',
					mealname: '2',
					mealmsg: '3',
					mealtype: '4',
					mealstate: '5',
					mealmoney: '6',
					mealtime: '7',
					mealremark: '8',
				}]
			}
		},
		methods: {
			handleClick(row) {
				//console.log(row.mealid)
				this.$store.commit("updateMeal", true)
				this.$store.commit("updateMealid", row.mealid)
				request({
					url: '/Meal/Meal',
					method: 'get',
					params:{
						// id:this.$store.state.mealid
						id:row.mealid
					}
				}).then(res=>{
					// console.log(res.data)					
					if(res.data.mealstate=='1'){
						res.data.mealstate=true
					}else{
						res.data.mealstate=false
					}
					this.mealInfos=res.data
					console.log(this.mealInfos)
				})
				
			}

		},
		created() {
			request({
				url: '/Meal/longMeals',
				method: 'get'
			}).then(res => {
				if (res.data.length > 0) {
					res.data.forEach(s => {
						s.mealtype = "长期"
						if(s.mealstate=="0"){
							s.mealstate="停用"
						}else{
							s.mealstate="启用中"
						}
					})
					this.mealInfo = res.data
				}
				return request({
					url: '/Meal/shortMeals',
					method: 'get'
				})
			}).then(res1 => {
				if (res1.data.length > 0) {
					res1.data.forEach(s => {
						s.mealtype = "短期"
						if(s.mealstate=="0"){
							s.mealstate="停用"
						}else{
							s.mealstate="启用中"
						}
						this.mealInfo.push(s)
					})
				}
				return request({
					url: '/Meal/illongMeals',
					method: 'get'
				})
			}).then(res1 => {
				if (res1.data.length > 0) {
					res1.data.forEach(s => {
						s.mealtype = "长期"
						if(s.mealstate=="0"){
							s.mealstate="停用"
						}else{
							s.mealstate="启用中"
						}
						this.mealInfo.push(s)
					})
				}
				return request({
					url: '/Meal/ilshortMeals',
					method: 'get'
				})
			}).then(res1 => {
				if (res1.data.length > 0) {
					res1.data.forEach(s => {
						s.mealtype = "短期"
						if(s.mealstate=="0"){
							s.mealstate="停用"
						}else{
							s.mealstate="启用中"
						}
						this.mealInfo.push(s)
					})
				}
			})
		}

	}
</script>
<style scoped>
	el-table-column {
		height: 50px;
	}

	.el-main {
		line-height: 20px;
	}
</style>
